前端实例练习 - 进度条

进度条

代码储存在Github
效果预览

初衷：很多人在初学前端的时候都会问，“如何入门前端？”
同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享，共同进步。

HTML部分

    <div id="myProgress">
        <div id="myBar"></div>
    </div>

    <div id="myOperation">
        <button id="myRun">Run</button>
        <span id="myPersent"></span>
    </div>

CSS部分

#myProgress {
    width: 100%;
    background-color: #ddd;
}

#myBar {
    width: 1%;
    height: 30px;
    background-color: green;
    text-align: center; /*文字水平居中*/
    color: #fff;
    line-height: 30px; /*文字垂直居中*/
}

#myOperation {
    margin-top: 10px;
}

#myRun {
    background-color: green;
    border: 0;
    outline: none;
    cursor: pointer;
    color: #fff;
    padding: 10px 15px;
}

#myPersent {
    float: right;
}

JavaScript 部分

(function() {
    var runBtn = document.getElementById("myRun"),
        myPersent = document.getElementById("myPersent");

    function progress() {
        var element = document.getElementById("myBar"); 
        var width = 1; /*从1%开始*/
        var run = setInterval(frame, 10);
        function frame() {
            if (width >= 100) { /*超过100%消除定时器*/
                clearInterval(run);
            } else {
                width++; 
                element.style.width = width + '%'; /*改变width属性值*/
                myPersent.innerHTML = width + '%'; /*右下部显示百分比*/
                element.innerHTML = width + '%';   /*进度条上显示百分比*/
            }
        }
    }

    runBtn.onclick = function() {
        progress();
    }
})();

---

好啦，现在所有的代码都写完啦！

赶快打开浏览器，看看效果吧！

在这里，只是给大家提供一种思路，参考。
具体的实现，每个人都可以有不同的方法。
请大家赶快发挥想象，把你最想实现的功能，在电脑敲出来吧！

参考自w3cschools